<template>
  <el-container style="height: 100vh; overflow: hidden;">
    <!-- 左侧导航栏 -->
    <el-aside width="220px" class="app-sidebar">
      <div class="logo-container">
        <i class="el-icon-s-platform logo-icon"></i>
        <span class="system-name">农业收益透明化分配系统</span>
      </div>

      <el-menu
          router
          :default-openeds="defaultOpeneds"
          class="sidebar-menu"
          background-color="#1e5631"
          text-color="#c4e3cb"
          active-text-color="#ffd700"
          @open="handleMenuOpen"
          unique-opened
      >
        <!-- 用户管理 -->
        <el-menu-item index="/index/usersManage" class="menu-item">
          <i class="el-icon-user menu-icon"></i>
          <span slot="title">成员管理</span>
        </el-menu-item>

        <!-- 土地信息 -->
        <el-submenu index="2" class="submenu">
          <template slot="title">
            <i class="el-icon-location-information menu-icon"></i>
            <span>土地信息</span>
          </template>
          <el-menu-item index="/index/landInfo" class="submenu-item">
            <i class="el-icon-data-analysis submenu-icon"></i>
            <span>信息总览</span>
          </el-menu-item>
          <el-menu-item index="/index/landManage" class="submenu-item">
            <i class="el-icon-tickets submenu-icon"></i>
            <span>土地管理</span>
          </el-menu-item>
        </el-submenu>

        <!-- 资产信息 -->
        <el-submenu index="3" class="submenu">
          <template slot="title">
            <i class="el-icon-money menu-icon"></i>
            <span>资产信息</span>
          </template>
          <el-menu-item index="/index/assetsInfo" class="submenu-item">
            <i class="el-icon-data-analysis submenu-icon"></i>
            <span>信息总览</span>
          </el-menu-item>
          <el-menu-item index="/index/assetsManage" class="submenu-item">
            <i class="el-icon-tickets submenu-icon"></i>
            <span>资产管理</span>
          </el-menu-item>
        </el-submenu>

        <!-- 支出信息 -->
        <el-submenu index="4" class="submenu">
          <template slot="title">
            <i class="el-icon-sold-out menu-icon"></i>
            <span>支出信息</span>
          </template>
          <el-menu-item index="/index/CostsInfo" class="submenu-item">
            <i class="el-icon-data-analysis submenu-icon"></i>
            <span>信息总览</span>
          </el-menu-item>
          <el-menu-item index="/index/CostsManage" class="submenu-item">
            <i class="el-icon-tickets submenu-icon"></i>
            <span>支出管理</span>
          </el-menu-item>
        </el-submenu>

        <!-- 收益信息 -->
        <el-submenu index="5" class="submenu">
          <template slot="title">
            <i class="el-icon-wallet menu-icon"></i>
            <span>收益信息</span>
          </template>
          <el-menu-item index="/index/RevenueInfo" class="submenu-item">
            <i class="el-icon-data-analysis submenu-icon"></i>
            <span>信息总览</span>
          </el-menu-item>
          <el-menu-item index="/index/RevenueManage" class="submenu-item">
            <i class="el-icon-tickets submenu-icon"></i>
            <span>收益管理</span>
          </el-menu-item>
        </el-submenu>

        <!-- 分配信息 -->
        <el-submenu index="6" class="submenu">
          <template slot="title">
            <i class="el-icon-share menu-icon"></i>
            <span>分配管理</span>
          </template>
          <el-menu-item index="/index/DistributionRecordsInfo" class="submenu-item">
            <i class="el-icon-data-analysis submenu-icon"></i>
            <span>信息总览</span>
          </el-menu-item>
          <el-menu-item index="/index/DistributionRuleManage" class="submenu-item">
            <i class="el-icon-tickets submenu-icon"></i>
            <span>分配规则</span>
          </el-menu-item>
        </el-submenu>

        <el-menu-item index="/index/CostAndRevenue" class="menu-item">
          <i class="el-icon-data-analysis submenu-icon"></i>
          <span slot="title">数据分析</span>
        </el-menu-item>

        <!-- 个人中心 -->
        <el-menu-item index="/index/userInfo" class="menu-item">
          <i class="el-icon-user-solid menu-icon"></i>
          <span slot="title">个人中心</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主内容区 -->
    <el-container>
      <!-- 顶部导航栏 -->
      <el-header class="app-header">
        <div class="profit-display">
          <i class="el-icon-coin profit-icon"></i>
          <span class="profit-label">总利润：</span>
          <span class="profit-value">¥ {{totalProfit || 0}}</span>
        </div>
        <div class="profit-display">
          <i class="el-icon-coin profit-icon"></i>
          <span class="profit-label">个人收益：</span>
          <span class="profit-value">¥ {{balance || 0}}</span>
        </div>
        <div class="user-area">
          <el-dropdown trigger="click" class="user-dropdown">
            <span class="el-dropdown-link">
              <i class="el-icon-user user-icon"></i>
              <span class="username">{{username}}</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="dropdown-menu">
              <el-dropdown-item @click.native="logout" class="dropdown-item">
                <i class="el-icon-switch-button"></i> 注销登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>

      <!-- 主内容 -->
      <el-main class="app-main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>
import {getOneProfitApi, getTotalProfitApi} from "@/api/profit";

export default {
  data() {
    return {
      username: '',
      totalProfit: '', // 示例数据
      balance:'',
      defaultOpeneds: [], // 默认打开的菜单
      currentOpenMenu: null // 当前打开的菜单index
    }
  },
  methods: {
    logout() {
      sessionStorage.clear()
      this.$router.push("/")
      this.$message.success('您已安全退出系统')
    },
    //获取总利润与个人利润
    getProfit(username){
      getTotalProfitApi().then(res =>{
        this.totalProfit = res.data
      })
      getOneProfitApi(username).then(res=>{
        this.balance = res.data
      })
    },
    //菜单
    handleMenuOpen(index) {
      // 如果点击的是不同的菜单，则关闭之前打开的菜单
      if (this.currentOpenMenu && this.currentOpenMenu !== index) {
        this.defaultOpeneds = [index]
      }
      this.currentOpenMenu = index
    }

  },
  computed: {
    isMobile() {
      return window.innerWidth < 768
    }
  },
  mounted() {
    if (!this.isMobile) {
      this.defaultOpeneds = ['1'] // 默认打开第一个菜单
    }
  },
  created() {
    this.username = sessionStorage.getItem('username') || '管理员'
    // 这里可以添加获取总利润的API调用
    this.getProfit(this.username)
  }
}
</script>

<style lang="scss" scoped>
/* 主色调 */
$primary-color: #1e5631; // 深绿色
$secondary-color: #4c956c; // 中等绿色
$light-green: #c4e3cb; // 浅绿色
$accent-color: #ffd700; // 金色
$text-color: #333;
$white: #ffffff;

.el-menu {
  transition: all 0.3s ease;
}


/* 整体布局 */
.el-container {
  font-family: 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
}

/* 侧边栏样式 */
.app-sidebar {
  background-color: $primary-color;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;

  .logo-container {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: darken($primary-color, 5%);
    color: $white;
    padding: 0 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    .logo-icon {
      font-size: 24px;
      margin-right: 10px;
      color: $accent-color;
    }

    .system-name {
      font-size: 18px;
      font-weight: bold;
      white-space: nowrap;
    }
  }
}

/* 菜单样式 */
.sidebar-menu {
  border-right: none;

  .menu-item, .submenu {
    transition: all 0.3s;

    &:hover {
      background-color: rgba(255, 255, 255, 0.1) !important;
    }
  }

  .menu-icon {
    color: $light-green;
    margin-right: 10px;
    font-size: 18px;
  }

  .submenu-item {
    background-color: darken($primary-color, 5%) !important;

    &:hover {
      background-color: rgba(255, 255, 255, 0.05) !important;
    }

    .submenu-icon {
      color: $light-green;
      margin-right: 10px;
      font-size: 16px;
    }
  }

  .el-menu-item.is-active {
    background-color: $secondary-color !important;
    color: $white !important;

    .menu-icon, .submenu-icon {
      color: $white !important;
    }
  }
}

/* 顶部导航栏样式 */
.app-header {
  background-color: $white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  z-index: 10;

  .profit-display {
    display: flex;
    align-items: center;
    font-size: 16px;

    .profit-icon {
      color: $secondary-color;
      font-size: 20px;
      margin-right: 8px;
    }

    .profit-label {
      color: $text-color;
      font-weight: 500;
    }

    .profit-value {
      color: $primary-color;
      font-weight: bold;
      margin-left: 5px;
    }
  }

  .user-area {
    .user-dropdown {
      cursor: pointer;
      display: flex;
      align-items: center;

      .user-icon {
        color: $secondary-color;
        font-size: 18px;
        margin-right: 8px;
      }

      .username {
        color: $text-color;
        font-weight: 500;
      }
    }

    .dropdown-menu {
      border: none;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

      .dropdown-item {
        color: $text-color;
        padding: 8px 20px;

        &:hover {
          color: $primary-color;
          background-color: rgba($light-green, 0.3);
        }
      }
    }
  }
}

/* 主内容区样式 */
.app-main {
  background-color: #f5f7fa;
  padding: 20px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba($primary-color, 0.3);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-track {
    background-color: #f1f1f1;
  }
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .app-sidebar {
    width: 64px !important;

    .system-name, .menu-item span, .submenu span {
      display: none;
    }

    .logo-container {
      justify-content: center;

      .logo-icon {
        margin-right: 0;
      }
    }
  }
}
</style>




<el-table-column
    prop="status"
    label="审核状态"
    width="180"
    align="center"
>
<template slot-scope="scope">
  <el-popover
      v-model="scope.row.statusPopoverVisible"
      placement="top"
      width="160"
      trigger="click"
  >
    <div style="text-align: center; margin: 0">
      <el-button
          v-for="status in ['pending', 'approved']"
          :key="status"
          size="mini"
          :type="getStatusButtonType(status)"
          @click="changeStatus(scope.row, status)"
      >
        {{ statusMap[status] }}
      </el-button>
      <el-button
          size="mini"
          type="danger"
          @click="showRejectDialog(scope.row)"
      >
        驳回
      </el-button>
    </div>
    <el-tag
        slot="reference"
        :type="statusTagType[scope.row.status]"
        effect="light"
        style="cursor: pointer;"
    >
      {{ statusMap[scope.row.status] }}
    </el-tag>
  </el-popover>

  <!-- 驳回原因对话框 -->
  <el-dialog
      title="填写驳回原因"
      :visible.sync="scope.row.rejectDialogVisible"
      width="500px"
      v-if="scope.row.rejectDialogVisible"
  >
    <el-form :model="scope.row" label-width="80px">
      <el-form-item label="驳回原因">
        <el-input
            type="textarea"
            :rows="3"
            v-model="scope.row.rejectReason"
            placeholder="请输入驳回原因"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="scope.row.rejectDialogVisible = false">取消</el-button>
        <el-button
            type="primary"
            @click="confirmReject(scope.row)"
        >确定</el-button>
      </span>
  </el-dialog>
</template>
</el-table-column>